import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Input, Select, Button, Card, message, Modal, Divider } from 'antd';
import Img from 'react-image';
import moment from 'moment';
import DescriptionList from '../../components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { urlParams } from '../../utils/utils';
import globalConstant from '../../utils/globalConstant';
import { add } from '../../utils/images';

const { Description } = DescriptionList;

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(({ immanage, general, loading }) => ({
  immanage,
  general,

  loading: loading.models.immanage,
}))
@Form.create()
export default class RepairOrderDetails extends PureComponent {
  state = {
    showPassVisible: false,
    showUnPassVisible: false,
    showDetails: false,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'general/getworkerList',
    });
    dispatch({
      type: 'immanage/getWorkOrderDetail',
      payload: {
        id: urlParams('id', window.location.href),
      },
    });
  }
  handleShowOrCancelVisible = (value) => {
    if (value === 'showPassVisible') {
      this.setState({
        showPassVisible: !this.state.showPassVisible,
      });
    }
    if (value === 'showUnPassVisible') {
      this.setState({
        showUnPassVisible: !this.state.showUnPassVisible,
      });
    }
  }
  handleUnPass =() => {
    const { validateFields } = this.props.form;
    const { dispatch } = this.props;
    validateFields(['remark'], (error, values) => {
      if (error) {
        return;
      }
      dispatch({
        type: 'immanage/checkAndAssign',
        payload: {
          id: this.props.immanage.workOrderInfo.id,
          isChecked: false,
          checkFailedMsg: values.remark,
        },
        callback: () => {
          this.props.dispatch(routerRedux.push('/account/repairorderfailure'));
          message.success('操作成功');
        },
      });
    });
  }
  handlePass = () => {
    const { validateFields } = this.props.form;
    const { dispatch } = this.props;
    const { workOrderInfo } = this.props.immanage;
    validateFields(['assignMaster'], (error, values) => {
      if (error) {
        return;
      }
      console.log('123123');
      dispatch({
        type: 'immanage/checkAndAssign',
        payload: {
          id: this.props.immanage.workOrderInfo.id,
          isChecked: true,
          workerId: values.assignMaster,
        },
        callback: () => {
          message.success('操作成功');
          this.props.dispatch(routerRedux.push(`/account/repairorderpass?id=${workOrderInfo.id}`));
        },
      });
    });
  }
  handleShow = () => {
    this.setState({
      showDetails: !this.state.showDetails,
    });
  }
  render() {
    const { loading } = this.props;
    const { workOrderInfo } = this.props.immanage;
    const { workerList } = this.props.general;
    const { getFieldDecorator } = this.props.form;
    const { showPassVisible, showUnPassVisible } = this.state;
    return (
      <PageHeaderLayout title="待审报修订单详情">
        <Card title="" loading={loading} bordered={false} extra={`报装时间：   ${moment(workOrderInfo.createTime).format(globalConstant.time)}`} >
          <DescriptionList size="large" title="订单信息" style={{ marginBottom: 32 }} col={2}>
            <Description term="报修套餐">{workOrderInfo.packageName}</Description>
            <Description term="姓名">{workOrderInfo.userName}</Description>
            <Description term="地址">{workOrderInfo.addrDetail}</Description>
            <Description term="联 系 人">{workOrderInfo.userContactName}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="" style={{ marginBottom: 32 }} col={1}>
            <Description term="联系电话">{workOrderInfo.userContactPhone}</Description>
            <Description term="宽带信息">{workOrderInfo.netAccountInfo}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="验证信息" style={{ marginBottom: 32 }} col={2}>
            <Description term="报修原因">{workOrderInfo.repairReason}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="" style={{ marginBottom: 32 }} col={2}>
            <Description term="现场照片">
              <Img style={{ width: 170, height: 90 }} src={workOrderInfo.workPhotos} />
            </Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          {
            this.state.showDetails === true ?
            (
              <DescriptionList size="large" title="其他详情" style={{ marginBottom: 32 }} col={2}>
                <Description term="用户ID">{workOrderInfo.userId}</Description>
                <Description term="报装地址">{workOrderInfo.addrComplete}</Description>
                <Description term="邮箱">{workOrderInfo.email}</Description>
                <Description term="是否付款">{workOrderInfo.payStatusDesc}</Description>
                <Description term="身份证正面">
                  <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoFront} />
                </Description>
                <Description term="身份证反面">
                  <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoSide} />
                </Description>
                <Description term="指派师傅">{workOrderInfo.workerName}</Description>
                <Description term="审核人">{workOrderInfo.checkUserName}</Description>
              </DescriptionList>
            ) : null
          }
          <DescriptionList onClick={() => { this.handleShow(); }} size="large" title="" style={{ float: 'right', marginRight: 50, marginTop: -20 }} col={2} >
            <span style={{ width: 35, padding: 0 }}>{this.state.showDetails === true ? '收起' : '展开'}</span>
            <img style={{ width: 20, padding: 0, marginTop: -5 }} src={add} alt="" />
          </DescriptionList>
          <DescriptionList size="large" title="" style={{ marginBottom: 32, marginTop: 50 }} col={2}>
            <Description term="">
              <Button style={{ width: 150 }} type="primary" onClick={() => { this.handleShowOrCancelVisible('showPassVisible'); }}>
                审核通过并派单
              </Button>
            </Description>
            <Description term="">
              <Button style={{ width: 100 }} type="primary" onClick={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}>
                审核不通过
              </Button>
            </Description>
          </DescriptionList>
        </Card>
        <Modal
          visible={showPassVisible}
          destroyOnClose
          title="审核订单"
          onCancel={() => { this.handleShowOrCancelVisible('showPassVisible'); }}
          footer={[
            <Button key="back" onClick={() => { this.handleShowOrCancelVisible('showPassVisible'); }}>取消审核</Button>,
            <Button key="submit" type="primary" onClick={() => { this.handlePass(); }}>
              审核通过
            </Button>,
            ]}
        >
          <Form>
            <FormItem
              label="指派师傅"
            >
              {getFieldDecorator('assignMaster', {
                initialValue: workOrderInfo.workerId,
                rules: [{
                  required: true, message: '请选择指派的师傅',
                }],
              })(
                <Select>
                  {
                    workerList && workerList.map((item, index) => {
                      return (
                        <Select.Option
                          key={index.toString()}
                          value={item.id}
                        >
                          {item.userName}
                        </Select.Option>
                      );
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Form>
        </Modal>
        <Modal
          visible={showUnPassVisible}
          destroyOnClose
          title="审核订单"
          onCancel={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}
          footer={[
            <Button key="back" onClick={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}>取消审核</Button>,
            <Button key="submit" type="primary" onClick={() => { this.handleUnPass(workOrderInfo.id); }}>
              审核不通过
            </Button>,
          ]}
        >
          <Form>
            <FormItem
              label="拒绝通过的理由"
            >
              {getFieldDecorator('remark', {
                rules: [{
                  required: true, message: '请说明不能通过审核的原因',
                }],
              })(
                <TextArea
                  placeholder="请说明不能通过审核的原因"
                  rows={4}
                />
              )}
            </FormItem>
          </Form>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
